<template>
  <div class="t-course">
      <!--<img class="img-flag" v-if="item.classType!=='1'" src="../../assets/img/hot.png"/>-->
      <img class="img-flag" v-if="item.classType==='1'" src="../../assets/img/zhongchou.png"/>
      <div class="t-course-mes"> 
            <p class="t-course-title">{{item.className}}</p>
            <div v-if="item.classType==='1'" class="t-course-status">
                <span class="number">
                    <em>{{item.registrationNumber}}</em>/{{item.quotaMax}}
                </span>
                <span class="course-rest">
                    {{item.quotaMin}}人报名可开班
                </span>
                <span class="money">
                    最低价 ￥{{ item.lowestPrice|formatNumber(2)}}
                </span>
            </div>
            <div v-else class="t-course-status">
                <span class="number">
                    {{(item.quota - item.regAmount)?(item.quota - item.regAmount)<10?'学位紧缺':'火热报名中':'学位已满'}}
                </span>
                <span class="money">
                    ￥{{ item.studyingFee|formatNumber(2)}}
                </span>
            </div> 
      </div>
  </div>
</template>

<script>
export default {
  name: 't-course',
  props:["item"],
  components: {
  },
  data: function () {
    return {
      title: '提示',
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.t-course{
    border-top: 2px dashed #f2f2f2;
    position: relative;
}
.t-course-title{
    font-size: 3.2rem;
    color: #333333;
}
.img-flag{
  position: absolute;
  top: -2px;
  right: 0;
  width: 5.2rem;
}
.t-course-mes{
  /*padding-left: 9rem;*/
  padding-top: 2rem;
}
.t-course-status{
    height: 8rem;
    line-height: 8rem;
    color: #999999;
}
.t-course-status .number em{
    color: #ff6600;
}
.t-course-status .course-rest{
    margin-left: 2rem;
}
.t-course-status .money{
    color: #ff6600;
    font-size: 3rem;
    float: right;
    clear: both;
    position: relative;
    /*right: 3rem;*/
    font-weight: bold;
}
</style>
